<template>
  <div class="common-layout">
    <el-container>
      <el-header class="homeHeader">
        <div class="header_div">
          <img class="a-img" src="../assets/home/loading.png" style="width: 19px;height: 19px;"/>
          <el-text class="toLoad" @click="toLoad">&nbsp;下载&nbsp;App</el-text>
          <img src="../assets/home/实心点.png" style="width: 15px;height: 15px;">
          <el-text class="toMoney" @click="toMoney">栏目收费说明</el-text>
          <p v-if="!is_login">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</p>
          <p v-if="is_login">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</p>
          <img src="../assets/home/个人.png" style="width: 19px;height: 19px;" v-if="!is_login">
          <el-text class="toLogin" @click="toLogin" v-if="!is_login">&nbsp;请登录</el-text>
          <img src="../assets/home/实心点.png" style="width: 15px;height: 15px;" v-if="!is_login">
          <el-text class="toRegister" @click="toRegister" v-if="!is_login">注册</el-text>
          <img src="../assets/default.jpg" style="width: 25px;height: 25px;border-radius: 50px;" v-if="is_login"/>
          <el-text class="login_name" v-if="is_login">&nbsp;&nbsp;你好！{{ username }}&nbsp;</el-text>
          <img src="../assets/home/实心点.png" style="width: 15px;height: 15px;" v-if="is_login">
          <el-text class="toLogin" @click="toOrder" v-if="is_login">&nbsp;我的问诊&nbsp;</el-text>
          <img src="../assets/home/实心点.png" style="width: 15px;height: 15px;" v-if="is_login">
          <el-text class="toLogin" @click="" v-if="is_login">&nbsp;关注的医生&nbsp;</el-text>
          <img src="../assets/home/实心点.png" style="width: 15px;height: 15px;" v-if="is_login">
          <el-text class="toLogin" @click="" v-if="is_login">&nbsp;修改昵称&nbsp;</el-text>
          <img src="../assets/home/实心点.png" style="width: 15px;height: 15px;" v-if="is_login">
          <el-text class="toLogin" @click="exit_login" v-if="is_login">&nbsp;退出登录</el-text>
        </div>
      </el-header>
      <el-main style="background-color: #f2f3f5;"><router-view></router-view></el-main>
      <el-footer style="background-color: #f4f4f4">
        <div id="j-dxy-bottom"><!--丁香医生-->
          <ul class="bottom-link">
            <li class="bottom-link-item">
              <a target="_blank" href="http://www.dxy.cn/pages/copyright.html" rel="nofollow">版权声明</a>
            </li>
            <li class="bottom-link-item">
              <a target="_blank" href="https://dxy.com/column/board">作者编委</a>
            </li>
            <li class="bottom-link-item">
              <a target="_blank" href="https://ask.dxy.com/ama/index">丁香医生</a>
            </li>
            <li class="bottom-link-item">
              <a href="mailto: doctor@dxy.com" rel="nofollow">投稿邮箱 doctor@dxy.com</a>
            </li>
            <li class="bottom-link-item"><span>客服电话：0571-22931767</span></li>
          </ul>
          <div class="bottom-line">
  <span class="bottom-line-item">Copyright © 2000-<span class="j-dxy-bottom-copyright-year">2024</span> DXY All
    Rights Reserved
  </span>
            <a id="record" class="bottom-line-item" target="_blank" href="https://beian.miit.gov.cn/" rel="nofollow">浙B2-20070219</a>
            <span class="bottom-line-item" rel="nofollow">浙卫(03)网审[2015] 048号</span>
            <span class="bottom-line-item">医疗器械网络销售备案编号：(浙杭)网械企备字[2018]第00246号</span>
          </div>
          <div class="bottom-line">
            <span class="bottom-line-item" rel="nofollow">第二类医疗器械经营备案凭证：浙杭食药监械经营备20153170号</span>
            <span class="bottom-line-item" rel="nofollow">网络文化经营许可证：浙网文[2018]11330-875号</span>
            <span class="bottom-line-item" rel="nofollow">食品许可证编号：JY13301080010985</span>
          </div>
          <div class="bottom-line">
            <span class="bottom-line-item" rel="nofollow">出版物经营许可证：新出发滨字第0064号</span>
            <span class="bottom-line-item" rel="nofollow">人力资源许可证编号：330108202110270036 号</span>
            <a class="bottom-line-item" target="_blank" href="https://img1.dxycdn.com/2022/0407/759/1810165994073381453-2.png" rel="nofollow">(浙) -经营性-2022-0039</a>
          </div>
          <div class="bottom-line">
            <span class="bottom-line-item" rel="nofollow">违法和不良信息举报电话：0571-28182622</span>
            <span class="bottom-line-item" rel="nofollow">举报邮箱：dxys@dxy.cn</span>
            <a class="bottom-line-item" rel="nofollow" target="_blank" href="https://assets.dxycdn.com/gitrepo/dxy-common-bottom/dist/report.html?t=1626775430995">涉未成年人违法和不良信息举报专区</a>
          </div>
          <div class="bottom-line">
            <img class="bottom-line-icon" src="https://assets.dxycdn.com/app/dxydoctor/img/ghs.png">
            <a class="bottom-line-item" target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=33010802004205" rel="nofollow">浙公网安备
              33010802004205号</a>
          </div>
          <div class="bottom-line">
            <a target="_blank" style="width: 35px" referrerpolicy="origin-when-cross-origin" href="http://idinfo.zjamr.zj.gov.cn/bscx.do?method=lzxx&amp;id=3301083301020000068855">
              <img src="https://img1.dxycdn.com/2020/1230/190/6618814823342006543-2.gif">
            </a>
            <a target="_blank" rel="nofollow me noopener noreferrer" style="margin-left: 10px; width: 35px" href="http://gcdthy.komect.com:18081/cloudsurvey/qaiuhxlh">
              <img src="https://img1.dxycdn.com/2021/0402/103/4090759592270723743-2.jpg">
            </a>
          </div></div>
      </el-footer>
    </el-container>
  </div>
</template>

<script setup>
import {onMounted, ref, watch} from "vue";
import { ElMessage } from "element-plus";
import {useRouter} from "vue-router";
const router = useRouter()

let is_login = ref(false)
let username = ref("")

onMounted(()=>{
  let token = sessionStorage.access_token || localStorage.access_token;
  if (token == null || token === "" || token == undefined){
    is_login.value = false
  } else {
    let payload = token.split(".")[1]  // 载荷
    let payload_data = JSON.parse(atob(payload)) // 用户信息
    username.value = payload_data.username
    is_login.value = true
  }
})

const toLoad=()=>{
  window.location.href = 'https://app.dxy.cn/'
}

const toLogin=()=>{
  router.push('/login')
}

const toRegister=()=>{
  router.push('/register')
}

const toOrder=()=>{
  router.push('/order')
}

const toMoney=()=>{

}
const exit_login=()=>{
  localStorage.removeItem("refresh_token");
  localStorage.removeItem("access_token");
  sessionStorage.removeItem("refresh_token");
  sessionStorage.removeItem("access_token");
  is_login.value = false
  username.value = ""
      ElMessage.success("退出成功！")
}
</script>

<style scoped>
*{
  margin: 0;
  padding: 0;
}
.homeHeader{
  margin: 0;
  padding: 0;
  border-bottom: 1px solid rgba(128, 128, 128, 0.2);
}

.header_div{
  position: absolute;
  top: 3%;
  right: 12.5%;
  display:flex;
}
.toLoad{
  text-decoration: none;
  color: black;
  font-size: 12px;
  cursor: pointer;
}
.toLoad:hover{
  color: #00c792;
}

.toMoney{
  font-size: 13px;
  color: #00c792;
  cursor: pointer;
}
.login_name {
  text-decoration: none;
  color: black;
  font-size: 13px;
  cursor: pointer;
}
.toLogin{
  text-decoration: none;
  color: black;
  font-size: 13px;
  cursor: pointer;
}
.toLogin:hover{
  color: #00c792;
}

.toRegister{
  text-decoration: none;
  font-size: 13px;
  color: black;
  cursor: pointer;
}
.toRegister:hover{
  color: #00c792;
}

/*底部导航*/
#j-dxy-bottom {
  background-color: #f4f4f4;
}

#j-dxy-bottom .bottom-link {
  margin: 20px 0 0 0;
}

 #j-dxy-bottom .bottom-link {
   display: flex;
   justify-content: center;
   transition: 0.3s all;
   list-style: none;
   color: #aaa;
 }
li, ol, ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

ul {
  display: block;
  list-style-type: disc;
  margin-block-start: 1em;
  margin-block-end: 1em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
  padding-inline-start: 40px;
  unicode-bidi: isolate;
}
#j-dxy-bottom .bottom-link-item {
  cursor: pointer;
}
#j-dxy-bottom .bottom-link-item a, #j-dxy-bottom .bottom-link-item span {
  color: #99a0aa;
  font-size: 13px;
  line-height: 32px;
  font-family: MicrosoftYaHeiUI;
}

 #j-dxy-bottom .bottom-link-item a {
   display: flex;
   align-items: center;
 }

 #j-dxy-bottom a {
   text-decoration: none;
 }
li {
  display: list-item;
  text-align: -webkit-match-parent;
  unicode-bidi: isolate;
}
#j-dxy-bottom .bottom-link-item:not(:last-child) a:after {
  content: "";
  display: inline-flex;
  width: 4px;
  height: 4px;
  border-radius: 2px;
  background-color: #c5c8d1;
  margin: 0 15px;
}
#j-dxy-bottom .bottom-line {
  color: #aaa;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 400;
}
a:-webkit-any-link {
  color: -webkit-link;
  cursor: pointer;
  text-decoration: underline;
}
#j-dxy-bottom .bottom-line-item {
  margin-right: 16px;
  color: #99a0aa;
  line-height: 32px;
  font-size: 13px;
  font-family: MicrosoftYaHeiUI;
}

 #j-dxy-bottom a {
   text-decoration: none;
 }

 #j-dxy-bottom a {
   text-decoration: none;
   color: #aaa;
 }
a, div, i, label, li {
  -webkit-tap-highlight-color: transparent;
}
a, a:hover, a:visited {
  text-decoration: none;
}

a:-webkit-any-link {
  color: -webkit-link;
  cursor: pointer;
  text-decoration: underline;
}
#j-dxy-bottom img {
  max-width: 100%;
}

 #j-dxy-bottom img {
   max-width: 100%;
 }
img {
  max-width: 100%;
}


img {
  overflow-clip-margin: content-box;
  overflow: clip;
}
</style>